<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="https://www.thymeleaf.org" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link th:href="@{/css/shop.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/css/Sellerber.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/css/bkg_ui.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/font/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="text/javascript"></script>

    <script th:src="@{/js/echarts.js}" type="text/javascript"></script>
    <script th:src="@{/js/china.js}" type="text/javascript"></script>


    <script type="text/javascript" th:src="@{/js/Validform/Validform.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
    <script th:src="@{/js/shopFrame.js}" type="text/javascript"></script>
    <script th:src="@{/js/Sellerber.js}" type="text/javascript"></script>
    <script th:src="@{/js/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/js/laydate/laydate.js}" type="text/javascript"></script>
    <script th:src="@{/js/dist/echarts.js}"></script>
</head>

<body>
<div class="operation clearfix mb15 same_module">
    <ul class="choice_search">
        <li class="clearfix col-xs-2 col-lg-2 col-ms-3 ">
            <input placeholder="商品名" id="commodityid" name="commodityId" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8">
        </li>
        <li>
            <button type="submit" class="btn button_btn bg-deep-blue" id="select"><i class="icon-search"></i>查看</button>
        </li>
    </ul>
</div>

<!--评论图-->
<div id="main01" style="float:left; height: 450px;width: 100%;background-color: #2c343c"></div>
<!--票档图-->
<!--<div id="main02" style="float:right; height: 450px;width: 50%;background-color: #2c343c;"></div>-->
</body>
</html>
<script>
    var zhi=[]; //评论值
    var myChart01;  //评论

    var myChart02
    $(function () {

        $("#select").click(function () {
            var id=$("#commodityid").val();     //商品id

            //评论
            $.getJSON("/Comment/getPriceSumByDay","Name="+id,function (r) {
                zhi=[];
                $.each(r,function (key,value) {
                    zhi.push({name: key+"星",value: value});
                })

                myChart01 = echarts.init(document.getElementById('main01'));
                init_pinglun();
            });


            //票档

        });
    });

    //展示评论表
    function init_pinglun() {
        option = {
            title: {
                text: '评论星级',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },
            tooltip : {
                trigger: 'item'
            },
            series : [
                {
                    name: '评论等级',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: zhi,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart01.setOption(option)
    }



    myChart02 = echarts.init(document.getElementById('main02'));
    myChart02.setOption({

        title: {
            text: '票档',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip : {
            trigger: 'item'
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:480, name:'邮件营销'},
                    {value:274, name:'联盟广告'},
                    {value:235, name:'视频广告'},
                    {value:400, name:'搜索引擎'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    });
</script>